<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-登录</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" href="../static/css/reset.css">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}" href="../static/css/main.css">
</head>
<body>
<div class="login_top clearfix">
    <a href="index.html" th:href="@{/index}" class="login_logo"><img src="../static/images/logo02.png" th:src="@{/images/logo02.png}"/></a>
</div>

<div class="login_form_bg">
    <div class="login_form_wrap clearfix">
        <div class="login_banner fl"></div>
        <div class="slogan fl">日夜兼程 · 急速送达</div>
        <div class="login_form fr">
            <div class="login_title clearfix">
                <h1>用户登录</h1>
                <a href="register.html" th:href="@{/register}">立即注册</a>
            </div>
            <div class="form_input">
                <form action="#" method="post">
                    <label>
                        <input type="text" name="username" class="name_input" placeholder="请输入用户名">
                    </label>
                    <div class="user_error"></div>
                    <input type="password" name="password" class="pass_input" placeholder="请输入密码">
                    <div class="pwd_error"></div>
                    <div class="more_input clearfix">
                        <input type="checkbox" name="remember">
                        <label>记住用户名</label>
                        <a href="#">忘记密码</a>
                    </div>
                    <input type="button" id="login-button" value="登录" class="input_submit">
                </form>
            </div>
        </div>
    </div>
</div>

<div th:include="inner::footer" class="footer"></div>

<script type="text/javascript" th:src="@{/js/jquery.min.js}" src="../static/js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#login-button').click(function () {
            let $username = $('input[name="username"]');
            let $password = $('input[name="password"]');

            if ($username.val().trim() === '') {
                $(".user_error").text("用户名不能为空！");
                $username.focus();
            } else if ($password.val().trim() === '') {
                $(".user_error").text("");
                $(".pwd_error").text("密码不能为空！");
                $password.focus();
            } else {
                $(".user_error").text("");
                $(".pwd_error").text("");
                let obj = {
                    username: $username.val(),
                    password: $password.val()
                }

                $.ajax({
                    url: '/user/login',
                    type: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify(obj),
                    success: function (data){
                        if(data.code == 200){
                            window.location.href = "/";
                        }else{
                            alert(data.message);
                        }
                    }
                })

            }

        });
    })
</script>
</body>
</html>